

<template>
  <div >
    <div class="main">
      <div v-for="item in filterData">{{item}}</div>
    </div>
    <div class="btnGroup">
      <button @click="prevPage">上一页<button>
      <button v-for="(item, index) in pageSum" @click="clickPage(index)">{{item}}<button>
      <button @click="nextPage">下一页<button>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        allData: null, // 过滤前的所有数据
        filterData: null, // 过滤后的数据
        pageIndex: 0, // 当前页
        pageCount: 10, // 一页显示多少个
        pageSum: 5 // 总页数
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        // 模拟发请求
        setTimeout(() => {
          let res = []
          for (let i = 1; i < 100; i++) {
            res.push(i)
          }
          this.allData = res
          this.filterData = res.slice(0, this.pageCount)
        }, 500)
      },
      prevPage () {
        // 上一页
        this.pageIndex = Math.max(--this.pageIndex, 0)
        this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
      },
      nextPage () {
        // 下一页
        this.pageIndex = Math.min(++this.pageIndex, this.pageSum - 1)
        this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
      },
      clickPage (index) {
        // 单击页码
        this.pageIndex = index
        this.filterData = this.allData.slice(this.pageIndex * this.pageCount, this.pageIndex * this.pageCount + this.pageCount)
      }
    }
  }
</script>

<style scoped>
	
</style>